<template>
	<s-layout class="contact_us" title="联系我们" tabbar="/pages/index/contact_us">
		<view class="contact_us_in">
			<img src='/static/con_bg.png' style="width: 100%" />
			<view class="contact_info">
				<view class="contact_info_box">
					<image src="/static/logo2.png" class="us_logo"></image>
					<view class="contact_info_item">销售地址：{{ info.address }}</view>
					<view class="contact_info_item">传真号码：{{ info.fax }}</view>
					<view class="contact_info_item">联系电话：{{ info.mobile }}</view>
				</view>
				<view class="footer">
					<a :href="info.map_url">
						一键导航
					</a>
					<a :href="'tel:' + info.mobile">
						一键拨号
					</a>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import app from '@/sheep/store/app';
	import {
		ref
	} from 'vue'
	const info = ref({})


	function loadData() {
		sheep.$api.app.contact_us().then(res => {
			info.value = res.data
		})
	}
	loadData()
</script>

<style lang="scss">
	.contact_us {
		position: relative;

		.contact_us_in {
			position: absolute;
			// height: 100%;
			// min-height: 1800rpx;
			width: 100%;
		}

		// .top_img {
		// 	width: 100%;
		// }

		.contact_info {
			position: absolute;
			margin: 24rpx;
			// border: 1px solid #f1bc94;
			border-radius: 12rpx;
			color: #D32830;
			top: 860rpx;
			font-weight: bold;
			background: url(/static/con_bg2.png) no-repeat;
			background-size: 100%;

			.contact_info_box {
				position: relative;
				padding: 32rpx 32rpx 32rpx 32rpx;
			}

			.us_logo {
				width: 340rpx;
				height: 88rpx;
			}
		}

		.contact_info_item {
			margin-bottom: 6px;

			&.name {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.footer {
		display: flex;
		margin-top: 0rpx;
		justify-content: space-around;
		padding-bottom: 40rpx;

		a {
			display: block;
			width: 282rpx;
			height: 92rpx;
			background: url(/static/bt1.png) no-repeat;
			background-size: 100%;
			line-height: 92rpx;
			color: #FFE1D0;
			text-align: center;
			text-decoration: none;

			&:last-child {
				background: url(/static/bt2.png) no-repeat;
				background-size: 100%;
				color: #D72C34;

			}
		}
	}
</style>